<template>
  <div>
    <SlotItem>
      <template v-slot:top-left>
        <div>本周热搜 TOP5</div>
      </template>
      <template v-slot:main>
        <ul class="slot1">
          <li><span>#区块链</span><span><i class="iconfont icon-hot-selected"></i>96</span></li>
          <li><span>#数据挖掘</span><span><i class="iconfont icon-hot-selected"></i>91</span></li>
          <li><span>#无人机</span><span><i class="iconfont icon-hot-selected"></i>87</span></li>
          <li><span>#生命科学</span><span><i class="iconfont icon-hot-selected"></i>72</span></li>
          <li><span>#传感器</span><span><i class="iconfont icon-hot-selected"></i>60</span></li>
        </ul>
      </template>
    </SlotItem>
    <SlotItem>
      <template v-slot:top-left>
        <div>可能感兴趣的人</div>
      </template>
      <template v-slot:top-right>
        <div><i class="iconfont icon-huanyipi"></i> 换一批</div>
      </template>
      <template v-slot:main>
        <ul class="slot2">
          <li>
            <div><span>李国盛</span><i class="iconfont icon-nanxing"></i> <span>52岁</span></div>
            <div>研究领域：机电一体化技术</div>
            <div>哈尔滨工业大学 · 教授</div>
            <span class="like"><i class="iconfont icon-jia1"></i> 关注</span>
          </li>
          <li>
            <div><span>陈颖</span><i class="iconfont icon-nv" style="color: #FF6A72;"></i> <span>36岁</span></div>
            <div>研究领域：人工智能</div>
            <div>清华大学 · 福教授</div>
            <span class="like"><i class="iconfont icon-jia1"></i> 关注</span>
          </li>
          <li>
            <div><span>李国盛</span><i class="iconfont icon-nanxing"></i> <span>52岁</span></div>
            <div>研究领域：机电一体化技术</div>
            <div>哈尔滨工业大学 · 教授</div>
            <span class="like"><i class="iconfont icon-jia1"></i> 关注</span>
          </li>
          <li>
            <div><span>陈颖</span><i class="iconfont icon-nv" style="color: #FF6A72;"></i> <span>36岁</span></div>
            <div>研究领域：人工智能</div>
            <div>清华大学 · 福教授</div>
            <span class="like"><i class="iconfont icon-jia1"></i> 关注</span>
          </li>
        </ul>
      </template>
    </SlotItem>
  </div>

</template>

<script>
import SlotItem from '../components/SlotItem.vue'
export default {
  components: {
    SlotItem
  }
}
</script>

<style lang="less" scoped>
.slot1,
.slot2 {
  padding: 0 20px;
}

.slot1 li {
  list-style: none;
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  border-bottom: 2px solid #eee;
  position: relative;

  & span:nth-child(1) {
    background-color: #F5F6FA;
    padding: 3px 5px;
    border-radius: 4px;
  }

  & span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 17px;
    font-family: '楷体';
    color: #333;

    .iconfont {
      font-size: 18px;
      margin-right: 5px;
      color: #FF8C0D;
    }
  }

  &:last-child {
    border-bottom: 0px;
  }
}

.slot2 li {
  list-style: none;
  padding: 20px 0;
  border-bottom: 2px solid #eee;
  position: relative;

  div {
    color: #666;
  }

  & div:nth-child(1) {
    & span:nth-child(1) {
      font-size: 20px;
      font-weight: 500;
      color: #000;
    }

    i {
      margin-left: 10px;
      color: #0E9BFF;
    }

    & span:last-child {
      color: #333;
    }
  }

  & div:nth-child(2) {
    margin: 8px 0;
  }

  .like {
    position: absolute;
    top: 23px;
    right: 0;
    background-color: #007AFF;
    // padding: 6px 10px;
    width: 80px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    border-radius: 17px;
  }
  &:last-child {
    border-bottom: 0px;
  }
}
</style>

<style>
body {
  background-color: #F4F6FA;
}
</style>